<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" type="text/css" href="./stylesheets/base.css">
    <link rel="stylesheet" type="text/css" href="./stylesheets/yuyue.css">
    <style>
        body{
            background-color: tan;
        }
        .chart {
            width: 80%;
            height: 350px;
            margin: 10px auto;
        }
    </style>
</head>

<body>
<div class="chart" id="chart"></div>

<div class="chart" id="line"></div>
<div class="chart" id="scatter"></div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/common.js"></script>
<script src="plugins/echarts/dist/echarts-all.js"></script>
<script>
    $(function () {
        bar();
        line();
        scatter();
        var _times=[],_curTime=new Date();
        for(var i=_curTime.getTime(),length=24,j=0;j<length;i-=3600000,j++){
            _times.push(DateFormat("MM-dd hh:00", new Date(i)))
        }
        console.log(JSON.stringify(_times))
    });
    var _toolbox={
        show:true,
        feature:{
            saveAsImage:{show:true}
        }
    };
    function bar(){
        var _chartDom = document.getElementById("chart");
        var _chartObj = echarts.init(_chartDom);
        $.ajax({
            url: "./data/chart-json/Bar.json",
            success: function (response) {
                var option = {
                    backgroundColor:"#fff",
                    title: {
                        show: false
                    },
                    toolbox:{
                        show:true,
                        feature:{
                            saveAsImage:{show:true}
                        }
                    },
                    legend: {
                        data: response.data.legend
                    },
                    xAxis: {
                        type: "category",
                        data: response.data.axis
                    },
                    yAxis: {
                        type: "value"
                    },
                    series: [
                        {
                            name: response.data.series[0].name,
                            type: "bar",
                            data:response.data.series[0].data
                        }
                    ]
                }
                _chartObj.setOption(option);
            }
        })
    }
    function line(){
        var _dom = document.getElementById("line");
        var _chart = echarts.init(_dom);
        $.ajax({
            url: "./data/chart-json/Line.json",
            success: function (response) {
                var option = {
                    backgroundColor:"#fff",
                    title: {
                        show: false
                    },
                    toolbox:{
                        show:true,
                        feature:{
                            saveAsImage:{show:true}
                        }
                    },
                    legend: {
                        data: response.data.legend
                    },
                    xAxis: {
                        type: "category",
                        data: response.data.axis
                    },
                    yAxis: {
                        type: "value"
                    },
                    series: [
                        {
                            name: response.data.series[0].name,
                            type: "line",
                            data:response.data.series[0].data
                        }
                    ]
                }
                _chart.setOption(option);
            }
        })
    }
    function scatter() {
        var _dom=document.getElementById("scatter");
        var _chart = echarts.init(_dom);

        function MillisecondToDate(msd) {
            var time = parseFloat(msd) / 1000;
            if (null != time && "" != time) {
                if (time > 60 && time < 60 * 60) {
                    time = parseInt(time / 60.0) + "分钟" + parseInt((parseFloat(time / 60.0) -
                                    parseInt(time / 60.0)) * 60) + "秒";
                } else if (time >= 60 * 60 && time < 60 * 60 * 24) {
                    time = parseInt(time / 3600.0) + "小时" + parseInt((parseFloat(time / 3600.0) -
                                    parseInt(time / 3600.0)) * 60) + "分钟" +
                            parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
                                    parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒";
                } else {
                    time = parseInt(time) + "秒";
                }
            }
            return time;
        }

        function randPoint20() {
            //生成过去24小时用户上线时间和时长
            var _groupDates = [];
            for (var i = 0; i < 20; i++) {
                var onLineTime = myRandom(600000, 7200000); //随机在线时长（每个人上线时长10分钟小时~~2小时之间）
                var tempDate = new Date();
                var randEndDate = tempDate.getTime() - 720000; //当前时间向前推2小时  1
                var randStartDate = randEndDate - 1000 * 60 * 60 * 24; // 1向前推一天
                var upDate = new Date();
                upDate.setTime(myRandom(randStartDate, randEndDate)); //上线时间，随机在这两个时间内产生
                var _seedDate = [DateFormat("hhmmss", upDate), onLineTime] //x轴上线时间，y轴离线时间
                _groupDates.push(_seedDate);
            }
            return _groupDates;
        }

        function randPoint50() {
            //生成过去24小时用户上线时间和时长
            var _groupDates = [];
            for (var i = 0; i < 50; i++) {
                var onLineTime = myRandom(600000, 7200000); //随机在线时长（每个人上线时长10分钟小时~~2小时之间）
                var tempDate = new Date();
                var randEndDate = tempDate.getTime() - 720000; //当前时间向前推2小时  1
                var randStartDate = randEndDate - 1000 * 60 * 60 * 24; // 1向前推一天
                var upDate = new Date();
                upDate.setTime(myRandom(randStartDate, randEndDate)); //上线时间，随机在这两个时间内产生
                var _seedDate = [DateFormat("hhmmss", upDate), onLineTime] //x轴上线时间，y轴离线时间
                _groupDates.push(_seedDate);
            }
            return _groupDates;
        }

        var option = {
            backgroundColor: "#fff",
            color: ["#97B552", "#DC69AA"],
            title: {
                show: false
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    var t1 = params.value[0];
                    var t2 = params.value[1];
                    var upTime = t1.substring(0, 2) + ":" + t1.substring(2, 4) + ":" + t1.substring(4, 6)
                    var onLineTime = MillisecondToDate(t2);
                    return params.seriesName + "<br/>" + "上线时间：" + upTime + "<br/>" + "在线时长：" + onLineTime;
                }
            },
            legend: {
                data: ['手机用户', '上网本用户']
            },
            toolbox: _toolbox,
            grid: {
                x: 30,
                y: 35,
                x2: 35,
                y2: 35
            },
            xAxis: [{
                type: 'categroy',
                name: "上线\n时间",
                min: 0,
                max: 240000,
                axisLabel: {
                    margin: 15,
                    formatter: function (v) {
                        return (v / 10000).toFixed() + ":00";
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                name: "在线时长\n(小时)",
                min: 600000,
                max: 7200000,
                axisLabel: {
                    formatter: function (v) {
                        return (v / 3600000).toFixed(1);
                    }
                }
            }],
            series: [{
                name: '手机用户',
                type: 'scatter',
                symbolSize: 3,
                data: randPoint20()
            }, {
                name: '上网本用户',
                type: 'scatter',
                data: randPoint50(),
                symbolSize: 3
            }]
        };
        _chart.setOption(option);
    }
</script>
</body>

</html>
